// 找到图片
let image = $('#image')
// 剪切的配置项
let option = {
  aspectRatio: 1,
  preview : '.img-preview'  //指定预览区的类名
}
image.cropper(option)

// 点击上传 选择照片
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click')
})

// 更换图片
$('#file').on('change', function () {
  // console.dir(this);   输出文件域的DOM对象
  if (this.files.length > 0) {
    let fileObj = this.files[0]
    // 转为URL作本地预览
    let url = URL.createObjectURL(fileObj)
    // console.log(url);  图片地址
    // 更换剪裁区图片
    // image.attr('src',url) 
    // image.cropper('方法名',方法的参数)
    image.cropper('replace',url)
  }
})

// 点击确认上传图片
$('button:contains("确定")').on('click', function () {
//  调用剪裁插件剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
  // 把canvas转换为base64格式
  let base64 = canvas.toDataURL()
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data:{avatar : base64} ,
    success: function (res) {
      if (res.status === 0) {
        layer.msg(res.message)
        window.parent.getUserInfo()
      }
    }
    
  })

})